<template>
	<view class="content">
		<u-navbar title="上传房源" :bgColor="bgColor" placeholder='true' titleStyle='font-weight: bold;' bg-color="#FFDA06"
			@leftClick="nihao">
		</u-navbar>
		<view class="contentUpper">
			<view style="margin-left: 1vw;">
				<view style="font-weight: bold;font-size: 22px;">
					有房出租/转租
				</view>
				<view style="font-weight: bold;font-size: 22px;margin-left: 100px;margin-top: 13px;">
					邻里帮您租！
				</view>
			</view>
			<view style="position: absolute;right: 0;">
				<image src="@/static/index/homeowner/fabu1.png" mode="widthFix" style="width: 40vw;"></image>
			</view>
			<!-- <u-image src="@/static/selection.png" mode="widthFix" width="30vw" :fade="true"></u-image> -->
		</view>
		<view class="contentBelow">
			<view class="title">
				您的角色
			</view>
			<view
				style="display: flex;justify-content: space-between;background-color: #fff;padding: 12px 10px;border-radius: 10px;"
				@click="show=true">
				<view class="">
					请选择您的角色
				</view>
				<view>
					<u-input suffixIcon="arrow-down" suffixIconStyle="color: #909399" disabled='true' inputAlign='right'
						customStyle='width:50vw' placeholder='房东' disabledColor='#fff' border='none'
						v-model="model.roleKey"></u-input>
				</view>
			</view>
			<view class="title">
				您的地址
			</view>
			<view style="border-radius: 10px;background-color: #fff;">
				<view style="display: flex;justify-content: space-between;padding: 12px 10px;">
					<!-- @click="oncommunity" 小区修改，修改了这里 -->
					<view class="">
						小区
					</view>
					<view style="position: relative;">
						<!-- 小区修改，修改了这里 -->
						<!-- <u-input suffixIcon="arrow-down" suffixIconStyle="color: #909399" disabled='true'
							placeholder='贵阳某某小区' inputAlign='right' disabledColor='#fff' border='none'
							v-model="model.villageName"></u-input> -->
						<!-- <u-input suffixIconStyle="color: #909399" placeholder='请输入某某区某某小区' inputAlign='right'
							@input='husis' border='none' v-model="model.villageName"></u-input> -->
						<input style="text-align: right;" type="text" placeholder='请输入某某区某某小区' @input='husis'
							v-model="model.villageName" />
						<view class="poPup" v-if="switchpoPup">
							<view style="display: flex;flex-direction: row-reverse;" @click="switchpoPup = false">
								<u-icon name="close" color="#2979ff" size="20"></u-icon>
							</view>
							<view v-for="(item,index) in cellSelection" @click="communitys(item.name,item.id)">
								<view style="margin: 5px 0;">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-line color="#F5F5F5 "></u-line>
				<view style="display: flex;justify-content: space-between;padding: 12px 10px;">
					<view class="">
						具体地址
					</view>
					<view>
						<u-input placeholder='输入地址' suffixIconStyle="color: #909399" disabledColor='#fff'
							inputAlign='right' border='none' v-model="model.address"></u-input>
					</view>
				</view>
				<!-- <view class="outsize">
					<view class="outsizeUp">
						组团
					</view>
					<view class="outsizeCenter">
						<u-input placeholder='请输入组团' suffixIconStyle="color: #909399" disabledColor='#fff'
							inputAlign='right' border='none' v-model="substance.one"></u-input>
					</view>
					<view class="units">
						/组团
					</view>
				</view>
				<view class="outsize">
					<view class="outsizeUp">
						栋数
					</view>
					<view class="outsizeCenter">
						<u-input placeholder='请输入栋数' suffixIconStyle="color: #909399" disabledColor='#fff'
							inputAlign='right' border='none' v-model="substance.two"></u-input>
					</view>
					<view class="units">
						/栋
					</view>
				</view>
				<view class="outsize">
					<view class="outsizeUp">
						单元
					</view>
					<view class="outsizeCenter">
						<u-input placeholder='请输入单元' suffixIconStyle="color: #909399" disabledColor='#fff'
							inputAlign='right' border='none' v-model="substance.three"></u-input>
					</view>
					<view class="units">
						/单元
					</view>
				</view>
				<view class="outsize">
					<view class="outsizeUp">
						楼层
					</view>
					<view class="outsizeCenter">
						<u-input placeholder='请输入楼层' suffixIconStyle="color: #909399" disabledColor='#fff'
							inputAlign='right' border='none' v-model="substance.four"></u-input>
					</view>
					<view class="units">
						/楼
					</view>
				</view> -->
				<u-line color="#F5F5F5 "></u-line>
				<view style="display: flex;justify-content: space-between;padding: 12px 10px;">
					<view class="">
						门牌号
					</view>
					<view>
						<u-input placeholder="输入门牌号" suffixIconStyle="color: #909399" disabledColor='#fff'
							v-model="model.houseNo" inputAlign='right' border='none'></u-input>
					</view>
				</view>
			</view>
			<view class="butt">
				<button @click="goon" style="background-color: #FFDA06;">下一步</button>
			</view>
			<!-- 小区 -->
			<u-picker :show="selectShow" :columns="selectList" @confirm="selectConfirm" keyName="label"
				@cancel="abolish"></u-picker>
			<!-- 角色 -->
			<u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show" cancelText='取消'
				@close="ci"></u-action-sheet>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		get,
		post
	}
	from "@/serve/method.js"
	import {
		onLoad
	}
	from '@dcloudio/uni-app'
	import {
		test
	} from '@/uni_modules/uview-plus';
	// const bgColor = ref("#FFDA06")
	// 返回
	const nihao = () => {
		uni.switchTab({
			url: '/pages/homepage/index'
		});
	}
	// 以下是弹窗
	const cellSelection = ref()
	const switchpoPup = ref(false)
	const husis = () => {
		console.log('张')
		if (model.villageName !== '') {
			let urls = '/api/system/room/listByAddress'
			post(urls, {
				sites: model.villageName
			}).then((res) => {
				console.log(res, 8888)
				if (res.data.length > 0) {
					cellSelection.value = res.data
					switchpoPup.value = true
				}
			})
			// switchpoPup.value = true
		} else {
			switchpoPup.value = false
		}
	}
	const communitys = (item, index) => {
		model.villageName = item
		model.villageId = index
		switchpoPup.value = false
	}
	// 以上是弹窗
	const nextstep = () => {
		console.log('下一步')
	}
	const model = reactive({
		openid: '',
		type: 0,
		ownerName: '',
		owerPhone: '',
		villageName: '',
		villageId: '',
		address: '',
		houseNo: '',
		payType: '季付',
		createName: uni.getStorageSync('lifeData').vuex_user.userName,
		publishId: uni.getStorageSync('lifeData').vuex_user.userId,
		state: 0,
		roleKey: "",
		rolelds: [],
		// user: {
		ownerName: "",
		ownerPhone: "",
		ownerIdCard: "",
		site: '',
		// },
		// houseUser: {
		keyPassword: "",
		keyStatus: '1',
		// }
	})
	const substance = reactive({
		one: '',
		two: '',
		three: '',
		four: ''
	})
	onLoad((option) => {
		console.log(option, 'oid1')
		model.openid = option.openid
		console.log(model.openid, 'oid2')
		findVillageList()
		system()
		uni.showModal({
			title: '温馨提示',
			content: '尊敬的房东大人，本平台为诚信互助共享平台!请确保您出租/转租房屋信息的真实性，若虚假上传，平台将会永久禁号!房源免费发布成功后，请保持联系畅通！房屋出租后，平台将在租客定金中扣除3-7日房租，其中分享员将获得5-7日房租酬谢金！',
			success: function(tishi) {
				if (tishi.confirm) {
					console.log('点击确定')
				}
			}
		});
	})
	// 角色选择
	const system = () => {
		let url = "/api/house/roleList";
		post(url).then(data => {
			console.log(data.rows, 'juese444444')
			for (let i = 0; i < data.rows.length; i++) {
				// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				let item = data.rows[i]
				list.value.push({
					name: item.roleName,
					value: item.roleId
				})
			}
			return data
		});
	}
	const title = ref('角色选择');
	const list = ref([]);
	const show = ref(false);
	const ci = () => {
		show.value = false
	}
	const selectClick = (index) => {
		console.log(index);
		model.roleKey = index.name
		if (model.rolelds.length > 0) {
			model.rolelds.length = 0
			model.rolelds.push(index.value)
		} else {
			model.rolelds.push(index.value)
		}
	}
	// 获取小区接口
	const oncommunity = () => {
		selectShow.value = true
	}
	const selectShow = ref(false)
	const selectList = ref([
		[]
	])
	const abolish = () => {
		selectShow.value = false
	}
	const findVillageList = () => {
		// //小区修改，修改了这里
		// let url = "/api/house/findVillageList";
		// get(url).then(data => {
		// 	for (let i = 0; i < data.data.length; i++) {
		// 		// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
		// 		let item = data.data[i]
		// 		selectList.value[0].push({
		// 			label: item.name,
		// 			value: item.id
		// 		})
		// 	}
		// 	return data
		// });
	}
	const selectConfirm = (e) => {
		e.value.map((val, index) => {
			model.villageName = val.label;
			model.villageId = val.value
			selectShow.value = false
		})
	}
	// 
	const goon = () => {
		console.log(888, model)
		// model.address = substance.one + `${substance.one ? '组团' : ''}` +
		// 	substance.two + `${substance.two ? '栋' : '' }` +
		// 	substance.three + `${substance.three ? '单元' : ''}` +
		// 	substance.four + `${substance.four ? '楼' : ''}`
		// console.log(999, model.address)
		if (test.isEmpty(model.roleKey)) {
			return uni.showToast({
				title: '请选择您的角色',
				duration: 2000,
				icon: 'none',
			});
		}
		if (test.isEmpty(model.villageName)) {
			return uni.showToast({
				title: '请选择小区',
				duration: 2000,
				icon: 'none',
			});
		}
		if (test.isEmpty(model.address)) {
			return uni.showToast({
				title: '请输入您的详细地址',
				duration: 2000,
				icon: 'none',
			});
		}
		if (test.isEmpty(model.houseNo)) {
			return uni.showToast({
				title: '请输入门牌号',
				duration: 2000,
				icon: 'none',
			});
		}
		uni.navigateTo({
			url: `/pages/detail/preHouse?id=${JSON.stringify(model)}`,
		});
	}
</script>
<style scoped lang="scss">
	.content {
		background-color: #FFDA06;

		.poPup {
			background-color: #999999;
			text-align: right;
			padding: 2px 5px;
			position: absolute;
			z-index: 99;
			width: 165px;
			right: -10px;
			top: 33px;
			color: #ffffff;
			border-radius: 5px;
		}

		.outsize {
			display: flex;
			justify-content: space-between;
			padding: 12px 10px;
			align-items: center;

			.outsizeUp {
				width: 50px;
			}

			.outsizeCenter {
				width: 100%;
			}

			.units {
				width: 55px;
				text-align: center;
				color: #888888;
				margin-left: 7px;
			}
		}

		.contentUpper {
			height: 140px;
			display: flex;
			align-items: center;
			padding: 0 2vw 0;
			position: relative;
		}

		.contentBelow {
			// border: 100px 0;
			border-radius: 20px 20px 0 0;
			height: calc(100vh - 232px);
			background-color: #F5F5F5;
			padding: 0 4vw;
			position: relative;

			.title {
				color: #999999;
				padding-top: 25px;
				// font-weight: bold;
				margin-bottom: 10px;
				font-size: 12px;
			}

			.substance {
				display: flex;
				align-items: center;
				background-color: #F4F4F4;
				margin-top: 10px;
				margin-bottom: 20px;
				padding: 10px 8px;
				border-radius: 10px;
				font-size: 10px;
			}

			.butt {
				position: absolute;
				bottom: 7vh;
				width: calc(100vw - 8vw);
			}
		}
	}
</style>